<template>
  <div>
    <el-button type="primary" text @click="add"> 增加 </el-button>
    <!-- Form增加 -->
    <el-dialog v-model="dialogFormVisible" title="推文轮播详情">
      <el-form :model="form">
        <el-form-item label="推文标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="外链" :label-width="formLabelWidth">
          <el-input v-model="form.linkurl" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.orders" autocomplete="off" />
        </el-form-item>
        <el-form-item label="推文图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :action="`${api}/index.php/index/Adminapi/aliuploadfile`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'images' });
              }
            "
            :key="form.images"
          >
            <img
              v-if="form.images"
              :src="HttpnewImg+form.images"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="postData"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column

      prop="orders"
      label="排序"
      width="220"
      align="center"
      />
      <el-table-column

        prop="title"
        label="推文标题"
        width="420"
        align="center"
      />
      <el-table-column

        prop="linkurl"
        label="外链"
        width="420"
        align="center"
      />


      <el-table-column
        prop="images"
        label="推文图片"
        width="420"
        align="center"
      >
        <template #default="scope">
          <img
            style="width: 100px; height: 100px"
            :src="HttpnewImg + scope.row.images"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="500">
        <template #default="scope">
          <el-button link type="primary" @click="eid(scope.row.id)"
            >修改</el-button
          >
          <el-button link type="danger" @click="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import UploadFile from "element-plus";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  components: {
    [UploadFile.name]: UploadFile,
  },
  data() {
    return {
      HttpnewImg:"https://ckmco-video.oss-cn-shanghai.aliyuncs.com/",
      tableData: [],
      jxlist: [],
      jxform: [],
      form: [],
      form1: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogjx: false,
      formLabelWidth: "120px",
      imageUrl: "",
      value: "",
      id: "",
      hdid: "",
      hdname: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    add() {
      this.dialogFormVisible = true;
      this.id = "";
      this.form.images = "";
      this.form.title = "";
      this.form.orders = "";
      this.form.linkurl=""
    },

    del(id) {
      ElMessageBox.confirm("是否确定删除?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/index.php/api/tuiwendel", {
              id: id,
            })
            .then((res) => {
              if (res.code == 200) {
                this.getData();
                ElMessage({
                  message: "删除成功",
                  type: "success",
                });
              }
            });
        })
        .catch(() => {});
    },
    eid(id) {
      this.dialogFormVisible = true;
      this.id = id;
      this.$http
        .post("/index.php/api/tuiwenxq", {
          id: id,
        })
        .then((res) => {
          if (res.code == 200) {
            this.form = res.data[0];
          }
        });
    },

    getData() {
      this.tableData = [];
      this.$http.post("/index.php/api/tuiwenlist").then((res) => {
        this.tableData = res.data;
        console.log('成功');
      });
    },
    postData() {
      let data = {
        id: this.id,
        images:this.form.images || "",
        title:this.form.title,
        orders:this.form.orders || "",
        linkurl:this.form.linkurl || ""
      };
      this.$http
        .post(
          this.id
            ? "/index.php/api/tuiwenupdate"
            : "/index.php/api/tuiwenadd",
          data
        )
        .then((res) => {
          if (res.code == 200) {
            this.dialogFormVisible = false;
            ElMessage({
              message: this.id ? "编辑成功" : "新增成功",
              type: "success",
            });
            this.id = "";
            this.getData();
          }
        });
    },
    getTimeFormat(zcTime) {
      let time = new Date(zcTime).getTime() / 1000; //除1000 是变成秒级的时间戳 不除就是毫秒级
      return time;
    },
    disabledDateFun(time) {
      return time.getTime() < Date.now() - 8.64e7;
    },
    formatEmployment(type) {
      const map = {
        1: "赛艇系列",
        2: "其他系列",
      };
      return map[type];
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS) * 1000)
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ");
    },
  },
};
</script>
<style>
.elswitch{
  display: flex;
}
.el-icon-plus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
